<template>
    <div>
        <!--顶部-->
        <el-row>
            <h1 class="center">贴吧管理</h1>
        </el-row>
        <el-row class="add_btn">
            <el-col :span="2" :offset="14">
                <el-tooltip class="item" effect="light" content="添加一个贴吧" placement="bottom-start" >
                    <el-button type="primary" size="medium" @click="handleAdd()">添加</el-button>
                </el-tooltip>
            </el-col>
            <el-col :span="2">
                <el-tooltip class="item" effect="light" content="将勾选的贴吧设置为首页显示的推荐贴吧" placement="bottom-start" >
                    <el-button type="primary" size="medium" @click="setRecommend()">设为推荐</el-button>
                </el-tooltip>
            </el-col>
        </el-row>

        <!--主体贴吧列表-->
        <el-row type="flex" justify="center">
            <el-col :span="18">
                <el-table
                        ref="barListTable"
                        :data="list"
                        @selection-change="handleSelectionChange"
                        class="list">
                    <!--左侧复选框  用于设置推荐贴吧-->
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <!--折叠信息列-->
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="贴吧编号">
                                    <span>{{ props.row.id }}</span>
                                </el-form-item>
                                <el-form-item label="贴吧名称">
                                    <span>{{ props.row.name }}</span>
                                </el-form-item>
                                <el-form-item label="所属类别">
                                    <span>{{ props.row.desc }}</span>
                                    <span v-for="v in props.row.categoryList" :key="v.id">【{{ v.name }}】&nbsp;&nbsp;</span>
                                </el-form-item>
                                <el-form-item label="加入人数">
                                    <span>{{ props.row.peopleNum }}</span>
                                </el-form-item>
                                <el-form-item label="贴子数">
                                    <span>{{ props.row.postNum }}</span>
                                </el-form-item>
                                <el-form-item label="贴吧头像">
                                    <div class="block">
                                        <el-image
                                                style="width: 100px; height: 100px;"
                                                class="round_border"
                                                :src="GLOBAL.serverBaseUrl + GLOBAL.barHeadImg + props.row.barImg"
                                                :preview-src-list="[GLOBAL.serverBaseUrl + GLOBAL.barHeadImg + props.row.barImg]"
                                                fit="scale-down"></el-image>
                                    </div>
                                </el-form-item>
                                <el-form-item label="贴吧描述">
                                    <span>{{ props.row.describe }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="贴吧编号"
                            width="130"
                            prop="id">
                    </el-table-column>
                    <el-table-column
                            label="贴吧名称"
                            width="180"
                            prop="name">
                    </el-table-column>
                    <el-table-column
                            label="加入人数"
                            width="150"
                            prop="peopleNum">
                    </el-table-column>
                    <el-table-column
                            label="帖子数"
                            width="150"
                            prop="postNum">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="handleEdit(scope.row.id)">编辑</el-button>
                            <el-popconfirm title="确定删除该贴吧吗？" v-on:confirm="handleDelete(scope.row.id)">
                                <el-button
                                        slot="reference"
                                        size="mini"
                                        type="danger">删除</el-button>
                            </el-popconfirm>
                            <el-button
                                    type="success"
                                    size="mini"
                                    @click="toSetTop(scope.row.id, scope.row.name)">置顶管理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <!--添加 贴吧 对话框-->
        <el-dialog
                title="添加贴吧"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form status-icon :model="postBarForm" label-width="100px" class="demo-ruleForm" :rules="rules" ref="ruleForm" id="postBarForm">
                <div>
                    <!--名称-->
                    <el-form-item label="贴吧名称：" prop="name">
                        <el-input placeholder="不大于15个汉字" v-model="postBarForm.name" clearable maxlength="30" ></el-input>
                    </el-form-item>
                    <!--类别   至少一种  最多三个-->
                    <div slot="tip" class="el-upload__tip tips">tips: 创建贴吧至少选择一个类别，至多选择三个贴吧类别。</div>
                    <el-form-item label="贴吧类别：" prop="checkedCategories">
                        <el-checkbox-group
                                v-model="postBarForm.checkedCategories"
                                :min="0"
                                :max="3">
                            <el-checkbox v-for="category in postBarForm.categoryList" :label="category.id" :key="category.id">{{category.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <!--头像-->
                    <el-form-item label="头像：" name="reg_part212" id="headImg">
                        <!--on-change 添加文件、上传成功和上传失败时都会被调用-->
                        <el-upload
                                ref="headImg"
                                :on-change="handleFileChange"
                                :auto-upload="false"
                                name="file"
                                class="avatar-uploader"
                                :action="GLOBAL.serverBaseUrl + GLOBAL.userTestFile"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :on-error="handleAvatarError"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="postBarForm.imageUrl" :src="postBarForm.imageUrl" class="avatar" alt="">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <!--描述-->
                    <el-form-item label="贴吧描述：">
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 3, maxRows: 5}"
                                placeholder="简单介绍一下此贴吧（可选，不大于100个汉字）"
                                v-model="postBarForm.describe">
                        </el-input>
                    </el-form-item>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add('ruleForm')">添 加</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import $ from 'jquery';  /*引入jquery*/
    export default {
        name: "postBar",
        data(){
            return{
                list: [], /*已有的贴吧数组*/
                dialogVisible: false,  /*添加分类模态框  默认不显示*/
                postBarForm: {  /*贴吧表单*/
                    name: '',  /*名称*/
                    describe: '',  /*描述*/
                    imageUrl: '', /*头像*/
                    categoryList: [], /*后台获取的类别 数组*/
                    checkedCategories: [], /*选择的类别  最少一个 最多三个   通过label属性设定为类别的id   int属性*/
                },
                selectedRows: [], // 选中的 表格行 构成的数组（每个元素都是个完整的行数据）
                rules: {
                    name: [
                        { required: true, message: '请输入贴吧名称', trigger: 'blur' },
                        { min: 0, max: 30, message: '请输入有效的贴吧名称！', trigger: 'blur' },
                    ],
                    /*约束名必须和复选框绑定的数组名一致  此处是checkedCategories*/
                    checkedCategories: [
                        { type: 'array', required: true, message: '请至少选择一种贴吧类别', trigger: 'change' }
                    ],
                },
            }
        },
        created(){  /*页面加载时执行  显示已有的贴吧列表*/

        },
        mounted(){
            // this.$http.get("http://localhost:8081/postBar/getList").then(req=>{
            this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.barList).then(req=>{
                if (req.data !== ""){
                    if (req.data.rs.result_code === 200){ /*查询成功   */
                        this.list = req.data.list;

                        // 由于 贴吧列表 受 this.list 渲染控制， 在这里修改 this.list数据，他不会直接渲染；（不渲染无法定位更改行状态)
                        // 所以这里使用  this.$nextTick 在其dom节点渲染后 进行延迟回调
                        this.$nextTick(()=>{
                            // 找出设置推荐的贴吧， 将该必表格行的复选框设置为 选中
                            this.list.forEach(li => {
                                if (li.setRecommend === 1){
                                    this.$refs.barListTable.toggleRowSelection(li, true); // 第二个参数为 true 表示设置为选中
                                }
                            });
                        });
                    }else {  /*查询失败*/
                        this.$message({
                            showClose: true,
                            duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                            message: req.data.rs.msg,
                            type: 'error'
                        });
                    }
                }else {
                    this.$message.error('糟糕，服务器出事了。。');
                }
            })
        },
        methods: {
            /*设置为首页的推荐贴吧  点击按钮时触发*/
            // 将 新勾选的贴吧设为 推荐， 将去除勾选的贴吧 取消推荐
            setRecommend(){
                let recBarIds = []; //  要设置为 推荐贴吧的  贴吧id 构成的数组

                // 截取出 要设置为 推荐贴吧的 id 数组
                this.selectedRows.forEach(row => {
                    recBarIds.push(row.id);
                });

                // 请求后端， 进行贴吧推荐重设置
                let formData = new FormData();
                formData.append("barIds", recBarIds);
                this.$http.patch(this.GLOBAL.serverBaseUrl + this.GLOBAL.barSetRecommend, formData).then(req=>{
                    if (req.data !== ""){
                        if (req.data.result_code === 200){ /*设置成功  */
                            this.$message({
                                message: req.data.msg,
                                type: 'success'
                            });
                        }else {  /*设置失败(出现异常)*/
                            this.$message({
                                showClose: true,
                                duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.msg,
                                type: 'error'
                            });
                        }
                    }else {
                        this.$message.error('糟糕，服务器出事了。。');
                    }
                });
            },

            /*表格 左侧多选框 改变时触发的钩子函数  参数为 当前勾选的数据项（各行信息构成的数组）*/
            handleSelectionChange(val) {
                this.selectedRows = val;
                // console.log(this.selectedRows);
            },

            // 跳转到 贴吧置顶页面
            // 参数： 要管理的 贴吧id
            toSetTop(barId, barName){
                console.log("（置顶管理）贴吧id：" + barId);
                let routeUrl = this.$router.resolve({
                    path: "/admin/setTopAdmin",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {barId: barId, barName: barName},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.type 来接收参数
                });

                //在当前页打开
                window.open(routeUrl.href, "_self");
            },

            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleFileChange(file){
                console.log("handleFileChange123");
                //不知为什么， 在这里 直接file.type无法直接获取文件类型（undefined）， 不过可以 file.name 获取文件名
                var o = file.name;
                var pos=o.lastIndexOf('.');  //转义一下
                var fileType = o.substring(pos+1);
                fileType = fileType.toLowerCase(); //一律转为小写
                console.log("文件类型：" + fileType);

                const isJPG = (fileType === 'jpg' || fileType === 'png');
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG或者PNG 格式!');
                    return;
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    return;
                }
                this.postBarForm.imageUrl = URL.createObjectURL(file.raw);
            },
            handleAvatarSuccess(res, file) {
                alert("上传成功。");
                this.postBarForm.imageUrl = URL.createObjectURL(file.raw);
            },
            handleAvatarError(){
                alert("上传失败。");
            },
            add(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let formData = new FormData($('#postBarForm')[0]);  /*这里获取到的表单信息只有那个头像文件（只为他设置了name属性）*/
                        formData.append("name", this.postBarForm.name);
                        formData.append("checkedCategories", this.postBarForm.checkedCategories);
                        formData.append("describe", this.postBarForm.describe);

                        console.log("file:" + this.postBarForm.imageUrl);
                        // this.$http.post("http://localhost:8081/postBar/add", formData).then(req=>{
                        this.$http.post(this.GLOBAL.serverBaseUrl + this.GLOBAL.barAdd, formData).then(req=>{
                            if (req.data !== ""){
                                if (req.data.result_code === 200){ /*添加成功   提示成功并刷新页面*/
                                    this.$router.push({name:'classifytmp', params:{fromPostBar: 'fromPostBar'}});
                                    this.$message({
                                        showClose: true,
                                        duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                        message: req.data.msg,
                                        type: 'success'
                                    });
                                }else {
                                    this.$message({
                                        showClose: true,
                                        duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                        message: req.data.msg,
                                        type: 'error'
                                    });
                                    this.dialogVisible = false;  /*关闭对话框*/
                                }
                            }else {
                                this.$message.error('糟糕，服务器出事了。。');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
                // console.log("array:" + this.postBarForm.checkedCategories);
            },
            /*添加一个贴吧*/
            handleAdd(){
                console.log("添加贴吧。");
                //先判断有没有分类  没有分类则提示暂无贴吧分类  无法添加（因为添加贴吧至少选择一个类别）
                // this.$http.get("http://localhost:8081/category/getList").then(req=>{
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.categoryGetList).then(req=>{
                    if (req.data !== ""){
                        if (req.data.rs.result_code === 200){ /*查询成功  pan  */
                            if (req.data.list.length === 0){  //暂无分类
                                this.$alert('目前暂无贴吧分类，赶快<a href="/admin/classify" class="mylink">添加分类</a>吧！', '无法添加', {
                                    dangerouslyUseHTMLString: true
                                });
                            }else {
                                console.log("正常添加贴吧，类别list长度：" + req.data.list.length);
                                this.postBarForm.categoryList = req.data.list;
                                this.dialogVisible = true; //显示添加贴吧对话框
                            }
                            // console.log("list元素个数length：" + list.length);
                        }else {  /*查询失败(出现异常)*/
                            this.$message({
                                showClose: true,
                                duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.rs.msg,
                                type: 'error'
                            });
                        }
                    }else {
                        this.$message.error('糟糕，服务器出事了。。');
                    }
                });
                //已有分类  正常显示添加贴吧对话框
            },
            /*编辑一个贴吧*/
            handleEdit(id){
                console.log("（来自编辑）贴吧id：" + id);

            },
            /*删除一个贴吧*/
            handleDelete(id){
                // this.$http.get("http://localhost:8081/postBar/del?id=" + id).then(req=>{
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.barDel + "?id=" + id).then(req=>{
                    if (req.data !== ""){
                        if (req.data.result_code === 200){ /*添加成功   提示成功并刷新页面*/
                            this.$router.push({name:'classifytmp', params:{fromPostBar: 'fromPostBar'}});
                            this.$message({
                                showClose: true,
                                duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.msg,
                                type: 'success'
                            });
                        }else {  /*添加失败*/
                            this.$message({
                                showClose: true,
                                duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                message: req.data.msg,
                                type: 'error'
                            });
                            this.dialogVisible = false;  /*关闭对话框*/
                        }
                    }
                });
                console.log("(来自删除)类别id：" + id);
            },
            handleClose(done) {
                this.$confirm('确认关闭？关闭将清空已填信息。')
                    .then(() => {
                        this.clearPostBarForm(); //清空已填写的内容
                        done();
                    })
                    .catch(() => {});
            },
            clearPostBarForm(){ /*清空categoryForm(添加类别时的表单)   一般在添加类别时 点击取消或者关闭键*/
                this.postBarForm.name = '';
                this.postBarForm.imageUrl = '';
                this.postBarForm.checkedCategories = [];
                this.postBarForm.describe = '';
            },
        }
    }
</script>

<style scoped>
    h1{
        font-size: 34px;
    }

    /*新建贴吧 对话框（贴吧分类上方的小提示文字）*/
    .tips{
        color: #f17008;
        padding-left: 17px;
    }

    /*头像上传框样式*/
    .avatar-uploader{
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 178px;
        height: 178px;
    }
    .avatar-uploader:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    /*添加分类按钮  row*/
    .add_btn{
        margin-top: 10px;
        margin-bottom: 23px;
    }

    /*贴吧的整个列表*/
    .list{
        padding-left: 25px;
        border-radius: 10px;
    }
</style>